<template>
  <div class="app-container ">
    <el-form ref="form" size="small" :model="form" :rules="rules" label-width="180px">
      <el-tabs v-model="activeName">
        <el-tab-pane style="padding-top:10px" label="考勤设置" name="考勤设置">
          <el-row>
            <el-col :span="24">
              <el-form-item label="上班时间">
                <el-time-picker style="width:500px;"
                  v-model="form.start_time"
                  placeholder="任意时间点">
                </el-time-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="下班时间">
                <el-time-picker style="width:500px;"
                  v-model="form.end_time"
                  format="HH:mm:ss"
                  placeholder="任意时间点">
                </el-time-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <el-form-item>
        <el-button size="small" type="primary" @click="submit">保存设置</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>
<script>
export default {
  name: 'Configtechnical',
  components: {},
  data() {
    return {
      form: {},
      loading: false,
      activeName: '考勤设置',
      rules: {}
    }
  },
  mounted() {
    this.$api.post('/Signinset/getInfo', {}).then(res => {
      this.form = JSON.stringify(res.data) == '[]' ? {} : res.data;
      this.form.start_time = new Date('2023-10-10 ' + res.data.start_time);
      this.form.end_time = new Date('2023-10-10 ' + res.data.end_time);
      this.setDefaultVal('keyword')
    })
  },
  methods: {
    formatTime(time){
        let h = new Date(time).getHours();
        h = h < 10 ? ('0' + h) : h;
        let minute = new Date(time).getMinutes();
        minute = minute < 10 ? ('0' + minute) : minute;
        let second = new Date(time).getSeconds();
        second = second < 10 ? ('0' + second) : second;
        return h + ':' + minute + ':' + second;
    },
    submit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true;

          let param ={
            start_time: this.formatTime(this.form.start_time),
            end_time: this.formatTime(this.form.end_time)
          }
          this.$api.post('/Signinset/update', param).then(res => {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    setDefaultVal(key) {
      if (this.form[key] == null || this.form[key] == '') {
        this.form[key] = []
      }
    }
  }
}
</script>
